<template>
  <div class="app-container WaterQualityCalendar">
    <div style="display: flex; justify-content: space-between">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <el-form-item label="" prop="riverid">
          <el-date-picker
            v-model="yeartype"
            value-format="yyyy"
            type="year"
            placeholder="选择开始年"
          >
          </el-date-picker>

          <el-date-picker
            v-model="yeartypeb"
            type="year"
            value-format="yyyy"
            placeholder="选择结束年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="padding: 10px"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <span class="describe" style="color: #ff0000">
        注:手工监测断面1至12月水质状况及变化对比分析
      </span>
      <div class="legend">
        <div class="sp" style="background: #ccffff"></div>
        <div>Ⅰ类</div>
        <div class="sp" style="background: #00ccff"></div>
        <div>Ⅱ类</div>
        <div class="sp" style="background: #00ff00"></div>
        <div>Ⅲ类</div>
        <div class="sp" style="background: #ffff00"></div>
        <div>Ⅳ类</div>
        <div class="sp" style="background: #ff9b00"></div>
        <div>Ⅴ类</div>
        <div class="sp" style="background: #ff0000"></div>
        <div>劣Ⅴ类</div>
        <div class="sp" style="background: #757f8d"></div>
        <div>无类别</div>
      </div>
    </div>
    <el-divider></el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="year" label="年份" />
      <!-- 2. 月份列：循环生成 1-12月，对应数据中的 01-12 字段 -->
      <el-table-column
        v-for="month in 12"
        :key="month"
        :label="`${month}月`"
        :prop="formatMonthProp(month)"
        align="center"
      >
        <!-- 自定义单元格内容：将 1/0 转为直观文字/符号 -->
        <template slot-scope="scope">
          <span
            @click="rowClick(scope.row, formatMonthProp(month))"
            :class="
              scope.row[formatMonthProp(month)] === '1'
                ? 'text-success'
                : 'text-danger'
            "
          >
            {{ scope.row[formatMonthProp(month)] === "1" ? "✔️ 是" : "❌ 否" }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出详情 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      append-to-body
    >
      <el-table
        :data="tableDatas"
        border
        style="width: 100%; overflow-x: auto; display: block"
      >
        <!-- 循环生成表头列 -->
        <el-table-column
          v-for="(item, index) in datas"
          :key="index"
          :prop="item.itemName"
          :label="item.itemName"
          align="center"
          min-width="120"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { qualityLevelCode } from "@/utils/levelColor";
import {
  getHandWaterCalendar,
  getHandWaterCalendarDetail,
} from "@/api/waterBusiness/interface.js";

export default {
  name: "WaterQualityCalendar",
  props: {
    dmid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isCheck: "0",
      qualityLevelCode,
      loading: false,
      drawer: false,
      drawerVisible: false,
      controlLevelList: [],
      query: {
        beginTime: this.parseTime(new Date(), "{y}"),
        segmentId: "",
        itemCode: "1",
      },
      rules: {
        beginTime: [
          {
            required: true,
            message: "监测时间不能为空",
            trigger: "change",
          },
        ],
        segmentId: [
          {
            required: true,
            message: "监测断面不能为空",
            trigger: "change",
          },
        ],
        itemCode: [
          {
            required: true,
            message: "监测项目不能为空",
            trigger: "change",
          },
        ],
      },
      itemList: [{ ID: "1", CNName: "水质类别" }],
      controlLevelCode: null,
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > new Date();
        },
      },
      describe: "",
      segmentName: "",
      targetLevelNames: "",
      meritDays: 0,
      meritRatio: 0,
      standardDays: 0,
      standardRatio: 0,
      calendarData: [],
      calendarDataOrigin: [],
      yeardata: {},
      monthdata: [],
      isover: false,
      queryParams: {},

      yeartype: new Date().getFullYear() - 1 + "",
      yeartypeb: new Date().getFullYear() + "",
      tableData: [],
      datas: [],
      dialogVisible: false,
    };
  },
  computed: {
    month() {
      return new Date().getMonth() + 1;
    },
    conditionData() {
      const condition = {
        query: this.query,
      };
      return condition;
    },

    // 转换数据格式，将所有指标值整合为一行数据
    tableDatas() {
      const rowData = {};
      this.datas.forEach((item) => {
        // 以itemName为键，effectiveValue为值构建一行数据
        rowData[item.itemName] = item.effectiveValue || "-";
      });
      // 返回包含一行数据的数组
      return [rowData];
    },
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    /**
     * 工具函数：将 1-12 的月份转为 01-12 的字符串（匹配数据中的字段名）
     * 例如：1 → "01"，10 → "10"
     */
    formatMonthProp(month) {
      return month.toString().padStart(2, "0");
    },
    handleQuery() {
      let query = {
        id: this.dmid,
        startYear: this.yeartype,
        endYear: this.yeartypeb,
      };
      getHandWaterCalendar(query).then((res) => {
        this.tableData = res.data;
      });
    },

    handleClose(done) {
      done();
    },
    // 行间点击
    rowClick(e, s) {
      console.log(">>>eeeeeeeee", e, s);
      let query = {
        id: this.dmid,
        month: e["year"] + "-" + s,
      };
      getHandWaterCalendarDetail(query).then((res) => {
        console.log(">>>手工站的日历详情啊", res);
        if (res.code === 200) {
          this.datas = res.data.dataList;
          this.dialogVisible = true;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
// @import "~@/views/oneMap/css/leftPanel.scss"; // 左侧面板样式
@import "~@/style/variables.scss";
[data-theme="theme-dark"] {
  .WaterQualityCalendar {
    .describe {
      color: #ccc;
      .seg {
        color: #ccc;
        background-color: rgba(#fff, 0.1);
      }
    }
    .legend {
      color: #ccc;
    }
  }
  .el-drawer.waterIndex-detail {
    .seg {
      color: #ccc;
      background-color: rgba(#fff, 0.1);
    }
    .describe {
      color: #ccc;
      > span:not(.line) {
        .des-value {
          color: #ccc;
        }
      }
      .line {
        background-color: #eee;
      }
    }
  }
}
.WaterQualityCalendar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .describe {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 16px;
    .seg {
      height: 100%;
      line-height: 36px;
      padding-right: 12px;
      border-radius: 16px 0;
      display: flex;
      gap: 12px;
      align-items: center;
      font-family: Source Han Sans CN;
      color: var(--current-color);
      background-color: rgba(#409eff, 0.1);
      .seg-icon {
        width: 40px;
        text-align: center;
        border-radius: 16px 0;
        color: #ffffff;
        background-color: var(--current-color);
      }
    }
    .des-value {
      font-family: Barlow Condensed SemiBold;
      font-size: 24px;
      margin: 0 4px;
      font-style: italic;
    }
  }
  .calendar-box {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 12px;
    height: 100%;
    overflow: auto;
  }
  .legend {
    display: flex;
    align-items: center;
  }
  .sp {
    width: 20px;
    height: 20px;
    margin: 0 10px;
  }
}
::v-deep {
  .el-drawer.waterIndex-detail {
    top: 70px;
    height: calc(100% - 70px);
    .echarts-box {
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .seg {
      height: 36px;
      line-height: 36px;
      padding-right: 12px;
      border-radius: 16px 0;
      display: inline-flex;
      gap: 12px;
      align-items: center;
      font-family: Source Han Sans CN;
      color: var(--current-color);
      background-color: rgba(#409eff, 0.1);
      .seg-icon {
        color: #ffffff;
        background-color: #409eff;
        width: 40px;
        text-align: center;
        border-radius: 16px 0;
      }
    }
    .describe {
      display: flex;
      justify-content: space-around;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      line-height: 44px;
      > span:not(.line) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .des-value {
          font-family: Barlow Condensed SemiBold;
          font-size: 24px;
          color: #333333;
        }
      }
      .line {
        width: 1px;
        background-color: #ececec;
        align-self: normal;
      }
    }
  }
  .el-drawer__header {
    margin-bottom: 12px;
  }
}
</style>
